<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="command/Bootstrap/bootstrap-3.3.0/css/bootstrap.min.css" />
		<link rel="stylesheet" href="command/Bootstrap/bootstrap-3.3.0/css/bootstrap-theme.min.css" />
		<link rel="stylesheet" href="css/kongpage.css" />
		<script src="command/jquery-3.4.0.min.js"></script>
		<script src="command/Bootstrap/bootstrap-3.3.0/js/bootstrap.min.js"></script>
		<script src="command/echarts.min.js"></script>

	</head>

	<body>
		<!--右侧界面数据显示-->
		<div class="row">
			<div class="col-md-12">
				<h1 class="page-header">信息概况</h1>
			</div>
		</div>
		<!--引用bootstrap图片，栅格系统-->
		<div class="row">
			<div class=" col-md-3 col-lg-3">
				<div class="panel panel-blue panel-widget ">
					<div class="row no-padding">
						<div class="col-sm-3 col-lg-5 widget-left" style="margin-left: 20px;">
							<em class="glyphicon glyphicon-shopping-cart glyphicon-l">
							</em>
						</div>
						<div class="col-sm-9 col-lg-7 widget-right" style="position: absolute; margin-left: 90px;">
							<div class="large">120</div>
							<div class="text-muted">New Orders</div>
						</div>
					</div>
				</div>
			</div>
			<div class="col-xs-12 col-md-3 col-lg-3">
				<div class="panel panel-orange panel-widget">
					<div class="row no-padding">
						<div class="col-sm-3 col-lg-5 widget-left">
							<em class="glyphicon glyphicon-comment glyphicon-l"></em>
						</div>
						<div class="col-sm-9 col-lg-7 widget-right">
							<div class="large">52</div>
							<div class="text-muted">Message</div>
						</div>
					</div>
				</div>
			</div>
			<div class="col-xs-12 col-md-3">
				<div class="panel panel-teal panel-widget">
					<div class="row no-padding">
						<div class="col-sm-3  widget-left">
							<em class="glyphicon glyphicon-user glyphicon-l"></em>
						</div>
						<div class="col-sm-9  widget-right">
							<div class="large">24</div>
							<div class="text-muted">New Users</div>
						</div>
					</div>
				</div>
			</div>
			<div class="col-xs-12 col-md-3 col-lg-3">
				<div class="panel panel-red panel-widget">
					<div class="row no-padding">
						<div class="col-sm-3  widget-left">
							<em class="glyphicon glyphicon-stats glyphicon-l"></em>
						</div>
						<div class="col-sm-9  widget-right">
							<div class="large">25.2k</div>
							<div class="text-muted">Visitors</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!---------------------------------------------------------------->
		<div class=row>
			<div class="col-md-6 col-xs-6">
				<div id="jfsbEchart1" style="width: 300px;height: 150px;"></div>
			</div>
			<div class="col-md-6 col-xs-6">
				<div id="jfsbEchart2" style="width: 300px;height: 150px;"></div>
			</div>
		</div>
		<div class=row>
			<div class="col-md-6 col-xs-6">
				<div id="jfsbEchart3" style="width: 400px;height: 300px;"></div>
			</div>
			<div class="col-md-6 col-xs-6">
				<div id="jfsbEchart4" style="width: 400px;height: 300px;"></div>
			</div>
		</div>
		<script type="application/javascript">
			//基于准备好的dom，初始化echarts实例
			var myEchart = echarts.init(document.getElementById('jfsbEchart1'));
			//指定图表的配置选项和数据
			var option = {
				title: {
					text: '机房一区',

				},
				tooltip: {
					trigger: 'item',
					formatter: "{a} <br/>{b} : {c} ({d}%)"
				},
				legend: {
					orient: 'vertical',
					left: 'right',
					data: ["服务器", "端口号", "服务品牌", "服务商", "设备类型"]
				},
				series: [{
					name: '访问来源',
					type: 'pie',
					radius: '55%',
					center: ['35%', '60%'],
					data: [{
							value: 12,
							name: '服务器'
						},
						{
							value: 20,
							name: '端口号'
						},
						{
							value: 30,
							name: '服务品牌'
						},
						{
							value: 5,
							name: '服务商'
						},
						{
							value: 3,
							name: '服务类型'
						}
					],
					itemStyle: {
						emphasis: {
							shadowBlur: 10,
							shadowOffsetX: 0,
							shadowColor: 'rgba(0, 0, 0, 0.5)'
						}
					}
				}]
			};
			//显示图表
			myEchart.setOption(option);
		</script>
		<script type="application/javascript">
			//基于准备好的dom，初始化echarts实例
			var myEchart = echarts.init(document.getElementById('jfsbEchart2'));
			//指定图表的配置选项和数据
			var option = {
				title: {
					text: '机房二区',

				},
				tooltip: {
					trigger: 'item',
					formatter: "{a} <br/>{b} : {c} ({d}%)"
				},
				legend: {
					orient: 'vertical',
					left: 'right',
					data: ["服务器", "端口号", "服务品牌", "服务商", "设备类型"]
				},
				series: [{
					name: '访问来源',
					type: 'pie',
					radius: '55%',
					center: ['35%', '60%'],
					data: [{
							value: 12,
							name: '服务器'
						},
						{
							value: 20,
							name: '端口号'
						},
						{
							value: 30,
							name: '服务品牌'
						},
						{
							value: 5,
							name: '服务商'
						},
						{
							value: 3,
							name: '服务类型'
						}
					],
					itemStyle: {
						emphasis: {
							shadowBlur: 10,
							shadowOffsetX: 0,
							shadowColor: 'rgba(0, 0, 0, 0.5)'
						}
					}
				}]
			};
			//显示图表
			myEchart.setOption(option);
		</script>
		<script type="application/javascript">
			//基于准备好的dom，初始化echarts实例
			var myEchart = echarts.init(document.getElementById('jfsbEchart3'));
			//指定图表的配置选项和数据
			var option = {
				title: {
					text: '机房三区',

				},
				tooltip: {},
				//显示颜色代表什么
				legend: {
					data: ['设备']
				},
				//X轴显示的数据名称
				xAxis: {
					data: ["服务器", "端口号", "服务品牌", "服务商", "设备类型"]
				},
				//Y轴显示的数据
				yAxis: {},
				series: [{
					name: '设备',
					type: 'bar',
					data: [12, 20, 30, 5, 3]
				}]
			};
			//显示图表
			myEchart.setOption(option);
		</script>
		<script type="application/javascript">
			//基于准备好的dom，初始化echarts实例
			var myEchart = echarts.init(document.getElementById('jfsbEchart4'));
			//指定图表的配置选项和数据
			var option = {
				title: {
					text: '机房四区',

				},
				tooltip: {},
				//显示颜色代表什么
				legend: {
					data: ['设备']
				},
				//X轴显示的数据名称
				xAxis: {
					data: ["服务器", "端口号", "服务品牌", "服务商", "设备类型"]
				},
				//Y轴显示的数据
				yAxis: {},
				series: [{
					name: '设备',
					type: 'bar',
					data: [12, 20, 30, 5, 3]
				}]
			};
			//显示图表
			myEchart.setOption(option);
		</script>
	</body>

</html>
